<div class="span6">
   <div class="widget-box transparent" id="recent-box">
      <div class="widget-header">
         <h4 class="lighter smaller">
            <i class="icon-rss orange"></i>
            Hoạt động gần đây
         </h4>
         <div class="widget-toolbar no-border">
            <ul class="nav nav-tabs" id="recent-tab">
               <li class="active">
                  <a data-toggle="tab" href="#task-tab">Khách hàng</a>
               </li>
               <li>
                  <a data-toggle="tab" href="#member-tab">Nhà cung cấp</a>
               </li>
               <li>
                  <a data-toggle="tab" href="#comment-tab">Họp</a>
               </li>
            </ul>
         </div>
      </div>
      <div class="widget-body">
         <div class="widget-main padding-4">
            <div class="tab-content padding-8 overflow-visible">
               <div id="task-tab" class="tab-pane active">
                  <h4 class="smaller lighter green">
                     <i class="icon-list"></i>
                     Các cuộc họp khách hàng
                  </h4>
                  <ul id="tasks" class="item-list">
                     <li class="item-orange clearfix">
                        <label class="inline">
                        <input type="checkbox" />
                        <span class="lbl"> Gặp đại diện công ty bia Sài Gòn</span>
                        </label>
                        <div class="pull-right easy-pie-chart percentage" data-size="30" data-color="#ECCB71" data-percent="42">
                           <span class="percent">42</span>
                           %
                        </div>
                     </li>
                     <li class="item-red clearfix">
                        <label class="inline">
                        <input type="checkbox" />
                        <span class="lbl"> Kí hợp đồng với công ty vải</span>
                        </label>
                        <div class="pull-right action-buttons">
                           <a href="#" class="blue">
                           <i class="icon-pencil bigger-130"></i>
                           </a>
                           <span class="vbar"></span>
                           <a href="#" class="red">
                           <i class="icon-trash bigger-130"></i>
                           </a>
                           <span class="vbar"></span>
                           <a href="#" class="green">
                           <i class="icon-flag bigger-130"></i>
                           </a>
                        </div>
                     </li>
                     <li class="item-default clearfix">
                        <label class="inline">
                        <input type="checkbox" />
                        <span class="lbl"> Khảo sát khách hàng tiềm năng</span>
                        </label>
                        <div class="inline pull-right position-relative">
                           <button class="btn btn-minier bigger btn-primary dropdown-toggle" data-toggle="dropdown">
                           <i class="icon-cog icon-only bigger-120"></i>
                           </button>
                           <ul class="dropdown-menu dropdown-icon-only dropdown-yellow pull-right dropdown-caret dropdown-close">
                              <li>
                                 <a href="#" class="tooltip-success" data-rel="tooltip" title="Mark&nbsp;as&nbsp;done">
                                 <span class="green">
                                 <i class="icon-ok bigger-110"></i>
                                 </span>
                                 </a>
                              </li>
                              <li>
                                 <a href="#" class="tooltip-error" data-rel="tooltip" title="Delete">
                                 <span class="red">
                                 <i class="icon-trash bigger-110"></i>
                                 </span>
                                 </a>
                              </li>
                           </ul>
                        </div>
                     </li>
                     <li class="item-blue clearfix">
                        <label class="inline">
                        <input type="checkbox" />
                        <span class="lbl"> Upgrading scripts used in template</span>
                        </label>
                     </li>
                     <li class="item-grey clearfix">
                        <label class="inline">
                        <input type="checkbox" />
                        <span class="lbl"> Adding new skins</span>
                        </label>
                     </li>
                     <li class="item-green clearfix">
                        <label class="inline">
                        <input type="checkbox" />
                        <span class="lbl"> Updating server software up</span>
                        </label>
                     </li>
                     <li class="item-pink clearfix">
                        <label class="inline">
                        <input type="checkbox" />
                        <span class="lbl"> Cleaning up</span>
                        </label>
                     </li>
                  </ul>
               </div>
               <div id="member-tab" class="tab-pane">
                  <div class="clearfix">
                     <div class="itemdiv memberdiv">
                        <div class="user">
                           <img alt="Bob Doe's avatar" src="<?php echo base_url('/assets/avatars/user.jpg');?>" />
                        </div>
                        <div class="body">
                           <div class="name">
                              <a href="#">Bob Doe</a>
                           </div>
                           <div class="time">
                              <i class="icon-time"></i>
                              <span class="green">20 min</span>
                           </div>
                           <div>
                              <span class="label label-warning">pending</span>
                              <div class="inline position-relative">
                                 <button class="btn btn-minier bigger btn-yellow dropdown-toggle" data-toggle="dropdown">
                                 <i class="icon-angle-down icon-only bigger-120"></i>
                                 </button>
                                 <ul class="dropdown-menu dropdown-icon-only dropdown-yellow pull-right dropdown-caret dropdown-close">
                                    <li>
                                       <a href="#" class="tooltip-success" data-rel="tooltip" title="Approve">
                                       <span class="green">
                                       <i class="icon-ok bigger-110"></i>
                                       </span>
                                       </a>
                                    </li>
                                    <li>
                                       <a href="#" class="tooltip-warning" data-rel="tooltip" title="Reject">
                                       <span class="orange">
                                       <i class="icon-remove bigger-110"></i>
                                       </span>
                                       </a>
                                    </li>
                                    <li>
                                       <a href="#" class="tooltip-error" data-rel="tooltip" title="Delete">
                                       <span class="red">
                                       <i class="icon-trash bigger-110"></i>
                                       </span>
                                       </a>
                                    </li>
                                 </ul>
                              </div>
                           </div>
                        </div>
                     </div>
                     <div class="itemdiv memberdiv">
                        <div class="user">
                           <img alt="Joe Doe's avatar" src="assets/avatars/avatar2.png" />
                        </div>
                        <div class="body">
                           <div class="name">
                              <a href="#">Joe Doe</a>
                           </div>
                           <div class="time">
                              <i class="icon-time"></i>
                              <span class="green">1 hour</span>
                           </div>
                           <div>
                              <span class="label label-warning">pending</span>
                              <div class="inline position-relative">
                                 <button class="btn btn-minier bigger btn-yellow dropdown-toggle" data-toggle="dropdown">
                                 <i class="icon-angle-down icon-only bigger-120"></i>
                                 </button>
                                 <ul class="dropdown-menu dropdown-icon-only dropdown-yellow pull-right dropdown-caret dropdown-close">
                                    <li>
                                       <a href="#" class="tooltip-success" data-rel="tooltip" title="Approve">
                                       <span class="green">
                                       <i class="icon-ok bigger-110"></i>
                                       </span>
                                       </a>
                                    </li>
                                    <li>
                                       <a href="#" class="tooltip-warning" data-rel="tooltip" title="Reject">
                                       <span class="orange">
                                       <i class="icon-remove bigger-110"></i>
                                       </span>
                                       </a>
                                    </li>
                                    <li>
                                       <a href="#" class="tooltip-error" data-rel="tooltip" title="Delete">
                                       <span class="red">
                                       <i class="icon-trash bigger-110"></i>
                                       </span>
                                       </a>
                                    </li>
                                 </ul>
                              </div>
                           </div>
                        </div>
                     </div>
                     <div class="itemdiv memberdiv">
                        <div class="user">
                           <img alt="Jim Doe's avatar" src="assets/avatars/avatar.png" />
                        </div>
                        <div class="body">
                           <div class="name">
                              <a href="#">Jim Doe</a>
                           </div>
                           <div class="time">
                              <i class="icon-time"></i>
                              <span class="green">2 hour</span>
                           </div>
                           <div>
                              <span class="label label-warning">pending</span>
                              <div class="inline position-relative">
                                 <button class="btn btn-minier bigger btn-yellow dropdown-toggle" data-toggle="dropdown">
                                 <i class="icon-angle-down icon-only bigger-120"></i>
                                 </button>
                                 <ul class="dropdown-menu dropdown-icon-only dropdown-yellow pull-right dropdown-caret dropdown-close">
                                    <li>
                                       <a href="#" class="tooltip-success" data-rel="tooltip" title="Approve">
                                       <span class="green">
                                       <i class="icon-ok bigger-110"></i>
                                       </span>
                                       </a>
                                    </li>
                                    <li>
                                       <a href="#" class="tooltip-warning" data-rel="tooltip" title="Reject">
                                       <span class="orange">
                                       <i class="icon-remove bigger-110"></i>
                                       </span>
                                       </a>
                                    </li>
                                    <li>
                                       <a href="#" class="tooltip-error" data-rel="tooltip" title="Delete">
                                       <span class="red">
                                       <i class="icon-trash bigger-110"></i>
                                       </span>
                                       </a>
                                    </li>
                                 </ul>
                              </div>
                           </div>
                        </div>
                     </div>
                     <div class="itemdiv memberdiv">
                        <div class="user">
                           <img alt="Alex Doe's avatar" src="assets/avatars/avatar5.png" />
                        </div>
                        <div class="body">
                           <div class="name">
                              <a href="#">Alex Doe</a>
                           </div>
                           <div class="time">
                              <i class="icon-time"></i>
                              <span class="green">3 hour</span>
                           </div>
                           <div>
                              <span class="label label-important">blocked</span>
                           </div>
                        </div>
                     </div>
                     <div class="itemdiv memberdiv">
                        <div class="user">
                           <img alt="Bob Doe's avatar" src="assets/avatars/avatar2.png" />
                        </div>
                        <div class="body">
                           <div class="name">
                              <a href="#">Bob Doe</a>
                           </div>
                           <div class="time">
                              <i class="icon-time"></i>
                              <span class="green">6 hour</span>
                           </div>
                           <div>
                              <span class="label label-success arrowed-in">approved</span>
                           </div>
                        </div>
                     </div>
                     <div class="itemdiv memberdiv">
                        <div class="user">
                           <img alt="Susan's avatar" src="assets/avatars/avatar3.png" />
                        </div>
                        <div class="body">
                           <div class="name">
                              <a href="#">Susan</a>
                           </div>
                           <div class="time">
                              <i class="icon-time"></i>
                              <span class="green">yesterday</span>
                           </div>
                           <div>
                              <span class="label label-success arrowed-in">approved</span>
                           </div>
                        </div>
                     </div>
                     <div class="itemdiv memberdiv">
                        <div class="user">
                           <img alt="Phil Doe's avatar" src="assets/avatars/avatar4.png" />
                        </div>
                        <div class="body">
                           <div class="name">
                              <a href="#">Phil Doe</a>
                           </div>
                           <div class="time">
                              <i class="icon-time"></i>
                              <span class="green">2 days ago</span>
                           </div>
                           <div>
                              <span class="label label-info arrowed-in  arrowed-in-right">online</span>
                           </div>
                        </div>
                     </div>
                     <div class="itemdiv memberdiv">
                        <div class="user">
                           <img alt="Alexa Doe's avatar" src="assets/avatars/avatar1.png" />
                        </div>
                        <div class="body">
                           <div class="name">
                              <a href="#">Alexa Doe</a>
                           </div>
                           <div class="time">
                              <i class="icon-time"></i>
                              <span class="green">3 days ago</span>
                           </div>
                           <div>
                              <span class="label label-success arrowed-in">approved</span>
                           </div>
                        </div>
                     </div>
                  </div>
                  <div class="center">
                     <i class="icon-group icon-2x green"></i>
                     &nbsp;
                     <a href="#">
                     See all members &nbsp;
                     <i class="icon-arrow-right"></i>
                     </a>
                  </div>
                  <div class="hr hr-double hr8"></div>
               </div>
               <!--member-tab-->
               <div id="comment-tab" class="tab-pane">
                  <div class="comments">
                     <div class="itemdiv commentdiv">
                        <div class="user">
                           <img alt="Bob Doe's Avatar" src="assets/avatars/avatar.png" />
                        </div>
                        <div class="body">
                           <div class="name">
                              <a href="#">Bob Doe</a>
                           </div>
                           <div class="time">
                              <i class="icon-time"></i>
                              <span class="green">6 min</span>
                           </div>
                           <div class="text">
                              <i class="icon-quote-left"></i>
                              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque commodo massa sed ipsum porttitor facilisis &hellip;
                           </div>
                        </div>
                        <div class="tools">
                           <div class="inline position-relative">
                              <button class="btn btn-minier bigger btn-yellow dropdown-toggle" data-toggle="dropdown">
                              <i class="icon-angle-down icon-only bigger-120"></i>
                              </button>
                              <ul class="dropdown-menu dropdown-icon-only dropdown-yellow pull-right dropdown-caret dropdown-close">
                                 <li>
                                    <a href="#" class="tooltip-success" data-rel="tooltip" title="Approve">
                                    <span class="green">
                                    <i class="icon-ok bigger-110"></i>
                                    </span>
                                    </a>
                                 </li>
                                 <li>
                                    <a href="#" class="tooltip-warning" data-rel="tooltip" title="Reject">
                                    <span class="orange">
                                    <i class="icon-remove bigger-110"></i>
                                    </span>
                                    </a>
                                 </li>
                                 <li>
                                    <a href="#" class="tooltip-error" data-rel="tooltip" title="Delete">
                                    <span class="red">
                                    <i class="icon-trash bigger-110"></i>
                                    </span>
                                    </a>
                                 </li>
                              </ul>
                           </div>
                        </div>
                     </div>
                     <div class="itemdiv commentdiv">
                        <div class="user">
                           <img alt="Jennifer's Avatar" src="assets/avatars/avatar1.png" />
                        </div>
                        <div class="body">
                           <div class="name">
                              <a href="#">Jennifer</a>
                           </div>
                           <div class="time">
                              <i class="icon-time"></i>
                              <span class="blue">15 min</span>
                           </div>
                           <div class="text">
                              <i class="icon-quote-left"></i>
                              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque commodo massa sed ipsum porttitor facilisis &hellip;
                           </div>
                        </div>
                        <div class="tools">
                           <a href="#" class="btn btn-minier btn-info">
                           <i class="icon-only icon-pencil"></i>
                           </a>
                           <a href="#" class="btn btn-minier btn-danger">
                           <i class="icon-only icon-trash"></i>
                           </a>
                        </div>
                     </div>
                     <div class="itemdiv commentdiv">
                        <div class="user">
                           <img alt="Joe's Avatar" src="assets/avatars/avatar2.png" />
                        </div>
                        <div class="body">
                           <div class="name">
                              <a href="#">Joe</a>
                           </div>
                           <div class="time">
                              <i class="icon-time"></i>
                              <span class="orange">22 min</span>
                           </div>
                           <div class="text">
                              <i class="icon-quote-left"></i>
                              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque commodo massa sed ipsum porttitor facilisis &hellip;
                           </div>
                        </div>
                        <div class="tools">
                           <a href="#" class="btn btn-minier btn-info">
                           <i class="icon-only icon-pencil"></i>
                           </a>
                           <a href="#" class="btn btn-minier btn-danger">
                           <i class="icon-only icon-trash"></i>
                           </a>
                        </div>
                     </div>
                     <div class="itemdiv commentdiv">
                        <div class="user">
                           <img alt="Rita's Avatar" src="assets/avatars/avatar3.png" />
                        </div>
                        <div class="body">
                           <div class="name">
                              <a href="#">Rita</a>
                           </div>
                           <div class="time">
                              <i class="icon-time"></i>
                              <span class="red">50 min</span>
                           </div>
                           <div class="text">
                              <i class="icon-quote-left"></i>
                              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque commodo massa sed ipsum porttitor facilisis &hellip;
                           </div>
                        </div>
                        <div class="tools">
                           <a href="#" class="btn btn-minier btn-info">
                           <i class="icon-only icon-pencil"></i>
                           </a>
                           <a href="#" class="btn btn-minier btn-danger">
                           <i class="icon-only icon-trash"></i>
                           </a>
                        </div>
                     </div>
                  </div>
                  <div class="hr hr8"></div>
                  <div class="center">
                     <i class="icon-comments-alt icon-2x green"></i>
                     &nbsp;
                     <a href="#">
                     See all comments &nbsp;
                     <i class="icon-arrow-right"></i>
                     </a>
                  </div>
                  <div class="hr hr-double hr8"></div>
               </div>
            </div>
         </div>
         <!--/widget-main-->
      </div>
      <!--/widget-body-->
   </div>
   <!--/widget-box-->
</div>
<!--/span-->